<style type="text/css">
    #html5av-audio-edit-panel .clear {
        clear:both;
    }

    #html5av-audio-edit-panel-save-status {
        color: green;
    }

    .portlet { margin: 0 1em 1em 0; }
    .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
    .portlet-header .ui-icon { float: right; }
    .portlet-content { padding: 0.4em; }
    .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
    .ui-sortable-placeholder * { visibility: hidden; }
</style>

<div class="wrap" id="html5av-audio-edit-panel">
    <h3>Audio Info Edit</h3>
    <form id="html5av-audio-edit-panel-form">

        <label for="html5av-audio-edit-panel-form-title"
               >Title:</label><br />
        <input type="text" id="html5av-audio-edit-panel-form-title" 
               value="<?php echo $title; ?>"
               style="width: 99%" />

        <label for="html5av-audio-edit-panel-form-alt"
               >Alt:</label><br />
        <input type="text" id="html5av-audio-edit-panel-form-alt" 
               value="<?php echo $alt; ?>"
               style="width: 99%" />

        <label for="html5av-audio-edit-panel-form-view"
               >View:</label><br />
        <select id="html5av-audio-edit-panel-form-view" >
            <?php foreach ($audioViews as $value => $selected) : ?>
                <option value="<?php echo $value ?>"
                        <?php echo $selected ?> ><?php echo $value ?></option>
                    <?php endforeach; ?>
        </select>

        <p style="float: right;">
            <span id="html5av-audio-edit-panel-save-status"></span>
            <input type="submit"
                   value="Save Info" />
        </p>
    </form>

    <?php if (count($sources) > 0) : ?>
        <h3>Manage Audio Source</h3>
        Drag & Drop to reorder.
        <div id="html5av-audio-edit-panel-source">
            <?php foreach ($sources as $source) : ?>
                <div class="portlet" id="source-id-<?php echo $source['ID'] ?>" >
                    <div class="portlet-header">
                        <?php echo $source['src'] ?>
                    </div>
                    <div class="portlet-content">
                        ID: <strong><?php echo $source['ID'] ?></strong>
                        External: <strong><?php echo $source['external'] ?></strong>
                        <label for="source-type-<?php echo $source['ID'] ?>">Codec:</label>
                        <select id="source-type-<?php echo $source['ID'] ?>">
                            <?php foreach ($codecs as $name => $value) : ?>
                                <?php if ($source['type'] == $value) : ?>
                                    <option value='<?php echo $value ?>'
                                            selected
                                            ><?php echo $name ?></option>
                                        <?php else : ?>
                                    <option value='<?php echo $value ?>'
                                            ><?php echo $name ?></option>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                        </select>
                        <label for="source-disable-<?php echo $source['ID'] ?>"
                               >Disable:</label>
                               <?php if ($source['disabled']) : ?>
                            <input type="checkbox"
                                   id="source-disable-<?php echo $source['ID'] ?>"
                                   value="1"
                                   checked />
                               <?php else : ?>
                            <input type="checkbox"
                                   id="source-disable-<?php echo $source['ID'] ?>"
                                   value="1"/>
                               <?php endif; ?>
                        <div style="float: right;">
                            <span id="source-update-<?php echo $source['ID'] ?>"
                                  style="color: green"></span>
                            <input type="submit"
                                   value="Save"
                            onclick=
                                        "javascript:sourceSave(<?php echo $source['ID'] ?>)"/>
                            <input type="submit"
                                   value="Delete"
                            onclick=
                                        "javascript:sourceDelete(<?php echo $source['ID'] ?>)"/>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <?php if (count($tracks) > 0) : ?>
        <h3>Manage Track</h3>
        Drag & Drop to reorder.
        <div id="html5av-audio-edit-panel-track">
            <?php foreach ($tracks as $track) : ?>
                <div class="portlet" id="track-id-<?php echo $track['ID'] ?>" >
                    <div class="portlet-header">
                        <?php echo $track['src'] ?>
                    </div>
                    <div class="portlet-content">
                        ID: <strong><?php echo $track['ID'] ?></strong>
                        External: <strong><?php echo $track['external'] ?></strong>
                        <label for="track-kind-<?php echo $track['ID'] ?>">Kind:</label>
                        <select id="track-kind-<?php echo $track['ID'] ?>">
                            <?php foreach ($kinds as $value) : ?>
                                <?php if ($track['kind'] == $value) : ?>
                                    <option value='<?php echo $value ?>'
                                            selected
                                            ><?php echo $value ?></option>
                                        <?php else : ?>
                                    <option value='<?php echo $value ?>'
                                            ><?php echo $value ?></option>
                                        <?php endif; ?>
                                    <?php endforeach; ?>
                        </select>
                        <label for="track-srclang-<?php echo $track['ID'] ?>"
                               >Srclang:</label>
                        <input id="track-srclang-<?php echo $track['ID'] ?>"
                               type="text" value="<?php echo $track['srclang'] ?>"/>
                        <label for="track-label-<?php echo $track['ID'] ?>"
                               >Label:</label>
                        <input id="track-label-<?php echo $track['ID'] ?>"
                               type="text" value="<?php echo $track['label'] ?>"/>

                        <label for="track-disable-<?php echo $track['ID'] ?>"
                               >Disable:</label>
                               <?php if ($track['disabled']) : ?>
                            <input type="checkbox"
                                   id="track-disable-<?php echo $track['ID'] ?>"
                                   value="1"
                                   checked />
                               <?php else : ?>
                            <input type="checkbox"
                                   id="track-disable-<?php echo $track['ID'] ?>"
                                   value="1"/>
                               <?php endif; ?>
                        <div style="float: right;">
                            <span id="track-update-<?php echo $track['ID'] ?>"
                                  style="color: green"></span>
                            <input type="submit"
                                   value="Save"
                            onclick=
                                        "javascript:trackSave(<?php echo $track['ID'] ?>)"/>
                            <input type="submit"
                                   value="Delete"
                            onclick=
                                        "javascript:trackDelete(<?php echo $track['ID'] ?>)"/>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <h3>Add Source or Track:</h3>
    <input type="submit"
           value="Add Source by Upload" 
           onclick="javascript:html5avSource()"/>
    <input type="submit"
           value="Add Source by External URL"
           onclick="javascript:html5avSourceExternalUrl()"/>
    <input type="submit"
           value="Add Track by Upload" 
           onclick="javascript:html5avTrack()"/>
    <input type="submit"
           value="Add Track by External URL" 
           onclick="javascript:html5avTrackExternalUrl()"/>
    <div id="html5av-audio-edit-panel-add"></div>
    <div class="clear"></div>
</div>

<script>
    var html5av_api = '<?php echo html5av_manager::getApiURL(); ?>';
    var av_edit_id = <?php echo $id; ?>
    
    function html5avSourceExternalUrl() {
        var post = {
            action: 'html5av_manager',
            node:'source_external',
            avid:av_edit_id
        };
        jQuery.post(ajaxurl, post, function(data) {
            jQuery('#html5av-audio-edit-panel-add').html(data);
        });
    }
    
    function html5avSource() {
        var post = {
            action: 'html5av_manager',
            node:'source_upload',
            avid:av_edit_id
        };
        jQuery.post(ajaxurl, post, function(data) {
            jQuery('#html5av-audio-edit-panel-add').html(data);
        });
    }
    
    function html5avTrackExternalUrl() {
        var post = {
            action: 'html5av_manager',
            node:'track_external',
            avid:av_edit_id
        };
        jQuery.post(ajaxurl, post, function(data) {
            jQuery('#html5av-audio-edit-panel-add').html(data);
        });
    }
    
    function html5avTrack() {
        var post = {
            action: 'html5av_manager',
            node:'track_upload',
            avid:av_edit_id
        };
        jQuery.post(ajaxurl, post, function(data) {
            jQuery('#html5av-audio-edit-panel-add').html(data);
        });
    }
    
    function sourceSave(id) {
        var type = jQuery('#source-type-'+id).val();
        if(jQuery('#source-disable-'+id).is(':checked')) {
            var disabled = 'true';
        } else {
            var disabled = 'false';
        }
        var post = {
            action: 'html5av_manager',
            node:'update_source',
            srcid:id,
            type:type,
            disabled:disabled
        }

        jQuery.post(ajaxurl, post, function(data) {
            jQuery('#source-update-'+id).empty();
            jQuery('#source-update-'+id).show();
            jQuery('#source-update-'+id).text(data);
            jQuery('#source-update-'+id).fadeOut(5000);
        });
    }
    
    function sourceDelete(id) {
        if(confirm('Are you sure?')) {
            var post = {
                action: 'html5av_manager',
                node:'delete_source',
                srcid:id
            }
            jQuery.post(ajaxurl, post, function() {
                html5avReset();
            });
        }
    }
    
    function trackSave(id) {
        var srclang = jQuery('#track-srclang-'+id).val();
        var label = jQuery('#track-label-'+id).val();
        
        var noError = true;
        var msg = '';
        if(srclang == '') {
            noError = false;
            msg += "Srclang cannot be left blank\n";
        }
        
        if(label == '') {
            noError = false;
            msg += "Label cannot be left blank\n";
        }
        
        if(!noError) {
            alert(msg);
        } else {
            var kind = jQuery('#track-kind-'+id).val();
            if(jQuery('#track-disable-'+id).is(':checked')) {
                var disabled = 'true';
            } else {
                var disabled = 'false';
            }
            var post = {
                action: 'html5av_manager',
                node:'update_track',
                trackid:id,
                kind:kind,
                disabled:disabled,
                srclang:srclang,
                label:label
            }

            jQuery.post(ajaxurl, post, function(data) {
                jQuery('#track-update-'+id).empty();
                jQuery('#track-update-'+id).show();
                jQuery('#track-update-'+id).text(data);
                jQuery('#track-update-'+id).fadeOut(5000);
            });
        }
    }
    
    function trackDelete(id) {
        if(confirm('Are you sure?')) {
            var post = {
                action: 'html5av_manager',
                node:'delete_track',
                trackid:id
            }
            jQuery.post(ajaxurl, post, function() {
                html5avReset();
            });
        }
    }
    
    function html5avReset() {
        if(jQuery('#audio-video-manager-title-'+av_edit_id).size() > 0) {
            html5avCallEditor(av_edit_id);
        }
        var post = {
            action: 'html5av_manager',
            node:'get_media_editor',
            avid:av_edit_id
        }
        if(jQuery('#html5av-post-audio-upload-editor').size() > 0) {
            jQuery.post(ajaxurl, post, function(data) {
                jQuery('#html5av-post-audio-upload-editor').html(data);
            });
        }
        if(jQuery('#html5av-widget').size() > 0) {
            jQuery.post(ajaxurl, post, function(data) {
                jQuery('#html5av-widget-editor-dialog').html(data);
            });
        }
    }
    
    function html5avUpdate(json) {
        if(jQuery('#audio-video-manager-title-'+av_edit_id).size() > 0) {
            jQuery('#audio-video-manager-title-'+av_edit_id).text(json.title);
            jQuery('#audio-video-manager-author-'+av_edit_id).text(json.author);
            jQuery('#audio-video-manager-created-'+av_edit_id).text(json.created);
            jQuery('#audio-video-manager-modified-'+av_edit_id).text(json.modified);
        }
        if(jQuery('#html5av-widget').size() > 0) {
            jQuery('#html5av-widget-current-av-title').text(json.title);
            jQuery('#html5av-widget-current-av-created').text(json.created);
            jQuery('#html5av-widget-current-av-modified').text(json.modified);
        }
    }
    
    function html5avEditaudioInfoCheck() {
        var title = jQuery('#html5av-audio-edit-panel-form-title').val();
        var noError = true;
        var msg = '';
        if(title == '') {
            noError = false;
            msg += "Title cannot be left blank\n";
        }
        
        if(!noError) {
            alert(msg);
        }
        
        return noError;
    }
    
    jQuery(function ($) {
        $('#html5av-audio-edit-panel-form').submit(function() {
            if(html5avEditaudioInfoCheck()) {
                var title = $('#html5av-audio-edit-panel-form-title').val();
                var alt = $('#html5av-audio-edit-panel-form-alt').val();
                var view = $('#html5av-audio-edit-panel-form-view').val();
                $('#html5av-audio-edit-panel-save-status').hide();
                var post = {
                    action: 'html5av_manager',
                    node:'audio_edit_submit',
                    avid:av_edit_id,
                    title:title,
                    alt:alt,
                    view:view
                };
                
                $.post(ajaxurl, post, function(json) {
                    json = $.parseJSON(json);
                    $('#html5av-audio-edit-panel-save-status').empty();
                    $('#html5av-audio-edit-panel-save-status').show();
                    $('#html5av-audio-edit-panel-save-status').text(json.status);
                    $('#html5av-audio-edit-panel-save-status').fadeOut(5000);
                    html5avUpdate(json);
                })
            }
            
            return false;
        });
        
        if($( "#html5av-audio-edit-panel-source" ).size() > 0) {
            $( "#html5av-audio-edit-panel-source" ).sortable({
                update : function () { 
                    var order = $('#html5av-audio-edit-panel-source').sortable('serialize');
                    var post = {
                        action: 'html5av_manager',
                        node:'reorder_source',
                        order:order
                    };
                    $.post(ajaxurl, post);
                }
            });
        
            $( "#html5av-audio-edit-panel-source" ).disableSelection();
        }
        
        if($( "#html5av-audio-edit-panel-track" ).size() > 0) {
            $( "#html5av-audio-edit-panel-track" ).sortable({
                update : function () { 
                    var order = $('#html5av-audio-edit-panel-track').sortable('serialize');
                    var post = {
                        action: 'html5av_manager',
                        node:'reorder_track',
                        order:order
                    };
                    $.post(ajaxurl, post);
                }
            });
        
            $( "#html5av-audio-edit-panel-track" ).disableSelection();
        }

        $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
        .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .end()
        .find( ".portlet-content" );

        $( ".portlet-header .ui-icon" ).click(function() {
            $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
        });
    });
</script>